<template>
  <div class="print-box">
    <div class="app-container" :class="imgLoading ? 'printing' : ''">
      <div class="print">
        <el-button @click="back">返回</el-button>
        <el-button :loading="imgLoading" :disabled="detailLoading" type="primary" @click="onPrintClickT">
          下载
        </el-button>
      </div>
      <div v-loading="detailLoading" ref="detailRef" class="detail">
        <div style="width: 100%;">
          <ReportPage :img-loading="imgLoading" :buttonShow="buttonShow"></ReportPage>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import ReportPage from '../reportPage/index.vue'
  import { ref } from 'vue'
  import html2Canvas from 'html2canvas'
  import JsPDF from 'jspdf'
  import {useRoute} from 'vue-router'
  import {upLoadFile} from '@/api/report/index.ts'
  import { getPdfFileName } from '@/api/report/index'
import router from '@/router'
  const route = useRoute()
  const imgLoading = ref(false)
  const detailLoading = ref(false)
  const buttonShow = ref(true)
  const detailRef = ref()
  const flag = ref(-1)
  flag.value = route.query.flag
  const onPrintClickT = () => {
    imgLoading.value = true
    buttonShow.value = false
    setTimeout(() => {
      onPrintClick()
      buttonShow.value = true
    })
  }
  const onPrintClick = () => {
    const canvas = document.createElement('canvas')
    const content = detailRef.value
    const width = content.offsetWidth
    const height = content.offsetHeight
    const scale = 2
    canvas.getContext('2d').scale(scale, scale)
    const rect = detailRef.value.getBoundingClientRect()
    html2Canvas((detailRef.value), {
      scale: scale, // 添加的scale 参数
      width: width, // dom 原始宽度
      height: height,
      useCORS: true, // 开启跨域
      dpi: window.devicePixelRatio * 2
    }).then(function (canvas) {
      let aapdf = ""
      let contentWidth = canvas.width
      let contentHeight = canvas.height
      let pageHeight = contentWidth / 592.28 * 841.89
      let leftHeight = contentHeight
      let position = 40
      let imgWidth = 595.28 - 48
      let imgHeight = 592.28 / contentWidth * contentHeight
      let pageData = canvas.toDataURL('image/jpeg', 1.0)
      let PDF = new JsPDF('', 'pt', 'a4')
      if (leftHeight < pageHeight) {
        PDF.addImage(pageData, 'JPEG', 24, 10, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          PDF.addImage(pageData, 'JPEG', 24, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          if (leftHeight > 0) {
            PDF.addPage()
          }
        }
      }
      const getPdfFileNameRes = async () => {
        if (route.query.pdfName === undefined) {
          const pdfFileNameRes = await getPdfFileName(route.query.taskId);
          return pdfFileNameRes.data.result;
        }else{
          return route.query.pdfName;
        }
      }
      getPdfFileNameRes().then(pdfName => {
        PDF.save(pdfName);
        if(flag.value === 0){
          const blob = new Blob([PDF.output('blob')], { type: 'application/pdf' });
        // 创建一个FormData对象来处理文件上传
        const formData = new FormData();
        formData.append('file', blob, pdfName);
        // 使用fetch上传文件
        upLoadFile(formData).then(res=>{
          if(res.data.code === 0){
            return true
          }else{
            return false
          }
        })
        }else if(flag.value === 1){
          return false
        }
        imgLoading.value = false
      });
    }).finally(() => {
      imgLoading.value = false
    })
  }
  
  const back =() => {
    router.back()
  //   router.push({
  //   path:'/eyeTrackingRecord',
  //   query:{
  //       pageNum:pagenum
  //   }
  //  })
  //  console.log(pagenum)
  }


</script>
<style scoped lang="scss">
  .print-box {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    padding-top: 1.5rem;
    overflow-x: auto;
  }

  .app-container {
    position: relative;
    width: 1000px;
    margin: 0 auto;

    .print {
      text-align: right;
    }

    .detail {
      width: 100%;
      box-sizing: border-box;


    }

  }
</style>